<template>
  <view class="setPhone">
    <view class="firstPage" v-if="!shouTwo">
      <view class="img_box">
        <img src="../images/big_phone.jpg" alt="" />
      </view>

      <view class="text">当前绑定手机号</view>
      <view class="number">{{ userData.mobile }}</view>
      <view class="btn" @click="shouTwo = true">更换绑定手机号</view>
    </view>
    <view class="secondPage" v-if="shouTwo">
      <view class="top_text">输入新的登陆手机号</view>
      <view class="bottom_text">更换号码后，登陆使用新的手机号</view>
      <view class="input_box">
        <view class="top_box" :class="phoneFocus == true ? 'phoneFocus' : ''">
          <view class="phone_input">
            <view class="phone_img">
              <img :src="phoneFocus == true ? y_phone : s_phone" alt="" />
            </view>
            <input
              type="text"
              v-model="newMobile"
              placeholder="新的登陆手机号"
              @focus="phoneFocus = true"
              @blur="phoneFocus = false"
            />
          </view>
        </view>
        <view
          class="bottom_box"
          :class="yanzhengFocus == true ? 'yanzhengFocus' : ''"
        >
          <view class="yanzheng_input">
            <view class="yanzheng_img">
              <img :src="yanzhengFocus == true ? y_xin : s_xin" alt="" />
            </view>
            <input
              type="text"
              v-model="yanNumber"
              placeholder="验证码"
              @focus="yanzhengFocus = true"
              @blur="yanzhengFocus = false"
            />
            <!-- <view class="yan_btn">点击获取</view> -->
            <button
              class="u-reset-button code-btn code-btn-start yan_btn"
              :disabled="!canClick"
              :class="{ 'code-btn-end': canClick }"
              @tap="getSmsCode('mobilelogin')"
            >
              点击获取
            </button>
          </view>
        </view>
      </view>
      <view class="sub_btn" @click="setMobile">提交</view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import { mapActions } from 'vuex';
import y_phone from '../images/y_phone.png';
import s_phone from '../images/s_phone.png';
import y_xin from '../images/y_xin.png';
import s_xin from '../images/xin.png';

export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    userData: [],
    shouTwo: false,
    yanNumber: '',
    newMobile: '',
    canClick: true,
    phoneFocus: false,
    yanzhengFocus: false,
    y_phone: y_phone,
    s_phone: s_phone,
    y_xin: y_xin,
    s_xin: s_xin,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {
    this.userData = this.$Route.query.userData;
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapActions(['getUserInfo']),
    // 修改绑定手机号
    setMobile() {
      _delay(() => {
        this.$http(
          'v1.modifyMobile',
          { mobile: this.newMobile, code: this.yanNumber },
          '请稍后'
        ).then(async (res) => {
          if (res.code === 1) {
            await this.getUserInfo();
            uni.showToast({
              title: '成功更改手机号',
              duration: 2000,
            });
            this.shouTwo = false;
            this.userData.mobile = this.newMobile;
            this.canClick = true;
          } else {
            this.canClick = true;
          }
        });
      });
    },
    codeChange(text) {
      this.tips = text;
    },
    // 获取短信验证码
    getSmsCode(type) {
      const that = this;
      if (this.newMobile.length) {
        that
          .$http(
            'v1.smsSend',
            {
              mobile: this.newMobile,
              event: 'login',
            },
            '获取验证码中...'
          )
          .then((res) => {
            if (res.code === 1) {
              // that.codeChange();
              that.$u.toast('验证码已发送，请注意查收短信');
              this.canClick = false;
            } else {
              that.$u.toast(res.msg);
            }
          });
      } else {
        that.$u.toast('请稍后再试');
      }
    },
  },

  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.setPhone {
  background: #f2f2f2;
  height: 100%;
  .firstPage {
    .img_box {
      padding: 103rpx 268rpx 30rpx;
      background-color: #f2f2f2;
      img {
        width: 216rpx;
        height: 216rpx;
        border-radius: 50%;
      }
    }

    .text {
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      height: 40rpx;
      width: 100%;
      background-color: #f2f2f2;
      line-height: 40rpx;
      text-align: center;
    }
    .number {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      height: 50rpx;
      width: 100%;
      background-color: #f2f2f2;
      line-height: 50rpx;
      text-align: center;
    }
    .btn {
      width: 640rpx;
      height: 88rpx;
      background: linear-gradient(to right, #a085f0, #80abf9);
      border-radius: 44rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 99rpx;
      margin-left: 55rpx;
    }
  }
  .secondPage {
    background-color: #f2f2f2;
    padding-top: 115rpx;
    .top_text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      height: 50rpx;
      width: 100%;
      line-height: 50rpx;
      text-align: center;
      background-color: #f2f2f2;
      margin-bottom: 10rpx;
    }
    .bottom_text {
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #9e9e9e;
      height: 42rpx;
      width: 100%;
      line-height: 42rpx;
      text-align: center;
      background-color: #f2f2f2;
    }
    .input_box {
      width: 100%;
      padding: 0 31rpx;
      .top_box {
        width: 100%;
        height: 116rpx;
        border-bottom: 2rpx solid #e2e2e2;
        display: flex;
        align-items: center;
        &.phoneFocus {
          border-bottom: 2rpx solid #c1b0f1 !important;
          // img {
          //   transform: translateY(-50rpx);
          //   filter: drop-shadow(0 50rpx 0rpx rgba(160, 132, 240, 1));
          // }
        }
        .phone_input {
          height: 56rpx;
          overflow: hidden;
          display: flex;
          align-items: center;
          .phone_img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 55rpx;
            height: 55rpx;
            margin-right: 50rpx;
            img {
              width: 55rpx;
              height: 55rpx;
            }
          }
        }
      }
      .bottom_box {
        width: 100%;
        height: 116rpx;
        border-bottom: 2rpx solid #e2e2e2;
        display: flex;
        align-items: center;
        background: #f2f2f2;
        &.yanzhengFocus {
          border-bottom: 2rpx solid #c1b0f1 !important;
        }
        .yanzheng_input {
          display: flex;
          align-items: center;
          justify-content: space-between;
          overflow: hidden;
          height: 55rpx;
          align-items: center;
          .yanzheng_img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 55rpx;
            height: 55rpx;
            margin-right: 50rpx;
            img {
              width: 55rpx;
              height: 55rpx;
            }
          }

          input {
            flex: 1;
          }
          .yan_btn {
            width: 200rpx;
            height: 60rpx;
            background: #a084f0;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-size: 24rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 60rpx;
            text-align: center;
          }
        }
      }
    }
    .sub_btn {
      width: 640rpx;
      height: 88rpx;
      background: linear-gradient(to right, #a085f0, #80abf9);
      border-radius: 44rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin: 30rpx 55rpx 0;
    }
  }
  .code-btn[disabled] {
    background-color: #fff;
  }

  .code-btn-start {
    width: 160rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-weight: 400;
    // color: #e9b766;
    opacity: 0.5;
  }
  .code-btn-end {
    opacity: 1 !important;
  }
}
</style>
